import React from 'react'

function drag(Com) {
    return (top, left) => {
        return class NewCom extends React.Component {
            state = {
                top,
                left
            }
            onMouseMove = (ev) => {
                const disX = ev.pageX
                const disY = ev.pageY
                this.setState({
                    left: disX,
                    top: disY
                })
            }
    
            onMouseDown = (ev) => {
                const disX = ev.pageX
                const disY = ev.pageY
                this.setState({
                    left: disX,
                    top: disY
                })
                document.body.addEventListener('mousemove', this.onMouseMove)
                document.body.addEventListener('mouseup', () => {
                    document.body.removeEventListener('mousemove', this.onMouseMove)
                })
            }
            render() {
                const { top, left } = this.state
                return <div onMouseDown={ this.onMouseDown } 
                            style={{
                                top,
                                left
                            }}
                            className='pos'>
                    <Com/>
                </div>
            }
        }
    }
}

export {
    drag
}